<template>
	<view class="container">
		<form @submit="formSubmit" @reset="formReset">
			<tui-list-cell :hover="false">
				<view class="tui-line-cell">
					<view class="tui-title">账号</view>
					<input placeholder-class="tui-phcolor" class="tui-input" name="acount" placeholder="请输入账号"
						maxlength="50" type="text" />
				</view>
			</tui-list-cell>
			<tui-list-cell :hover="false">
				<view class="tui-line-cell">
					<view class="tui-title">密码</view>
					<input password placeholder-class="tui-phcolor" class="tui-input" name="pwd"
						placeholder="请输入密码,目前不需要密码." maxlength="50" type="text" />
				</view>
			</tui-list-cell>

			<view class="tui-btn-box">
				<button class="tui-button-primary" hover-class="tui-button-hover" formType="submit"
					type="primary">Submit</button>
				<button class="tui-button-primary tui-button-gray" hover-class="tui-button-gray_hover"
					formType="reset">Reset</button>
			</view>
		</form>
	</view>
</template>
<script>
	// data 数据 及 方法
	import form from "@/components/common/tui-validation/tui-validation.js"

	let rules = [{
		name: "acount",
		rule: ["required"],
		msg: ["请输入账号"]
	}]
	export default {
		data() {
			return {

			}
		},
		methods: {
			formSubmit: function(e) {
				//进行表单数据
				let formData = e.detail.value;
				//校验
				let checkRes = form.validation(formData, rules);
				if (!checkRes) {
					// 登录方法
					if (this.login()) {
						uni.showToast({
							title: "登录成功!",
							icon: "none"
						});
						// 跳转首页
						
					} else {
						uni.showToast({
							title: "登录失败!",
							icon: "none"
						});
					}



				} else {
					//校验失败 checkRes 为错误信息
					uni.showToast({
						title: checkRes,
						icon: "none"
					});
				}
			},
			formReset: function(e) {
				console.log("清空数据")
			},
			login: function() {

				return true
			},
		},
	}
</script>

<style scoped>
	.container {
		padding: 20rpx 0 50rpx 0;
	}

	.tui-line-cell {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.tui-title {
		line-height: 32rpx;
		min-width: 120rpx;
		flex-shrink: 0;
	}

	.tui-input {
		font-size: 32rpx;
		color: #333;
		padding-left: 20rpx;
		flex: 1;
		overflow: visible;
	}

	.tui-btn-box {
		padding: 40rpx 50rpx;
		box-sizing: border-box;
	}

	.tui-button-gray {
		margin-top: 30rpx;
	}
</style>